<!--  -->
<template>
  <div class="school">
    <h1>-------School页面----------</h1>
    <h2>{{schoolName}}</h2>
    <h2>{{schoolName02}}</h2>
    <h2>{{num}}</h2>
    <button @click="add">点击num+1</button>
    <button @click="sendSchoolName(schoolName)">点我传递学校名给APP</button>
    <button @click="sendSchoolName02(schoolName02)">自定义事件传递学校名给App</button>
    <button @click="unbind">解绑jason事件</button>
    <button @click="goDie">点击销毁School组件(vc)</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      schoolName: '皇家帝国大学',
      schoolName02: '长春大学',
      num: 0
    }
  },
  props: ['getSchoolMsg'],
  methods: {
    add () {
      console.log('add事件被触发了');
      this.num++
    },
    sendSchoolName (name) {
      this.getSchoolMsg(name)
    },
    sendSchoolName02 (name) {
      this.$emit('jason', name, '刘备', '关羽', '张飞')
      this.$emit('demo')
    },
    unbind () {
      // 1.解绑一个自定义事件
      // this.$off('jason')
      // 2.解绑多个事件
      // this.$off(['jason', 'demo'])
      // 3.解绑全部事件
      this.$off()
    },
    goDie () {
      this.$destroy()
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
.school {
  width: 60%;
  height: 300px;
  background-color: lightpink;
  margin: 0 auto;
}
</style>